
import { Table,Modal } from 'antd'
import React,{ useState } from 'react'
 
export default function XTable() {
  //表格
    const Tit = [
        {
          title: '序号',
          width: 100,
          dataIndex: 'key',
          key: 'name',
          align:'center',
          fixed: 'left',
        },
        {
          title: '标题',
          width: 100,
          dataIndex: 'age',
          align:'center',
          key: 'age',
          fixed: 'left',
        },
        {
          title: '拟付款日期',
          dataIndex: 'address',
          align:'center',
          key: '1',
        },
        {
          title: '付款金额（万）',
          dataIndex: 'address',
          width:150,
          align:'center',
          key: '2',
        },
        {
          title: '所属项目',
          dataIndex: 'address',
          align:'center',
          key: '3',
        },
        {
          title: '关联合同',
          dataIndex: 'address',
          align:'center',
          key: '4',
        },
        {
          title: '是否紧急',
          dataIndex: 'address',
          align:'center',
          key: '5',
        },
        {
          title: '申请人',
          dataIndex: 'address',
          align:'center',
          key: '6',
        },
        {
          title: '提交时间',
          dataIndex: 'address',
          align:'center',
          key: '7',
        },
        {
          title: '操作',
          key: 'operation',
          align:'center',
          fixed: 'right',
          width: 250,
          render: () => <>
                          <span className='action' >编辑</span>&nbsp;&nbsp;&nbsp;
                          <span className='action' onClick={showModal}>提交审核</span>&nbsp;&nbsp;&nbsp;
                          <span className='action' >详情</span>&nbsp;&nbsp;&nbsp;
                          <span className='action'onClick={DelShowModal} >删除</span>
                        </>
        },
      ];
      const ContentArr = [
        {
          key: '1',
          name: 'Jrown',
          age: 32,
          address: 'New Yk',
          align:'center',
        },
        {
          key: '2',
          name: 'Jim ',
          age: 40,
          align:'center',
          address: ' Park',
        },{
          key: '3',
          name: 'John Brown',
          age: 32,
          align:'center',
          address: 'York Park',
        },
        {
          key: '4',
          name: 'Jim Green',
          age: 40,
          align:'center',
          address: 'London',
        }
      ];
  //确认提交模态框
  const [isModalVisible, setIsModalVisible] = useState(false);

  const showModal = () => {
    setIsModalVisible(true);
  };

  const handleOk = () => {
    setIsModalVisible(false);
  };

  const handleCancel = () => {
    setIsModalVisible(false);
  };
    //删除模态框
    const [DelIsModalVisible, delSetIsModalVisible] = useState(false);

    const DelShowModal = () => {
      delSetIsModalVisible(true);
    };
  
    const DelHandleOk = () => {
      delSetIsModalVisible(false);
    };
  
    const DelHandleCancel = () => {
      delSetIsModalVisible(false);
    };
  return (
    <div>
        <Table
          columns={Tit}
          dataSource={ContentArr}
          scroll={{
            x: 1300,
      }}/>
      <Modal title="确认提交" visible={isModalVisible} onOk={handleOk} onCancel={handleCancel} centered okText="确认" cancelText="取消">
        <h2 className='ifDel'>是否继续提交材料采购付款申请</h2>
        <p className='del'>提交后将不可撤回</p>
      </Modal>
      <Modal title="确认删除" visible={DelIsModalVisible} onOk={DelHandleOk} onCancel={DelHandleCancel} centered okText="确认" cancelText="取消">
        <h2 className='ifDel'>是否确认删除该信息</h2>
        <p className='del'>删除后将不可恢复</p>
      </Modal>
    </div>
  )
}
